<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    1、后台更改header
    2、使用jQuery jsonp
    3、使用http-proxy-middleware代理解决
    （原因就是因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据啦。）
</body>
<script>
    // 1.打开config/index.js,在proxyTable中添写如下代码:
    proxyTable: {
        '/api': { // 请求的代称，写在Axios里的BaseUrl
            target: 'http://localhost:8083',  // 真实请求URl
                changeOrigin: true, // 允许跨域
                    pathRewrite: {  // 替换，通配/api的替换成/
                '^/api': '/'
            }
        }
    }
    // 2.然后在Axios配置baseUrl为/api
    getData() {
        axios.get('/api/bj11x5.json', function (res) {
            console.log(res)
        })
    }

    // 第三种方法是: .Jquery jsonp
    // 1.引入Jquery ,cnpm install jquery --save-dev
    // 2.在webpack.base.conf.js文件中加入
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]

    // 3.在需要的temple里引入也可以在main.js里全局引入
    import $ from 'jquery'
    $.ajax({
        url: '地址',
        type: 'GET',
        dataType: 'JSONP',
        success: function (res) {
            self.data = res.data.slice(0, 3)
            self.opencode = res.data[0].opencode.split(',')
        }
    })






</script>

</html>